<template>
  <div class="edit">
    <van-cell :border="false">
      <span slot="title" class="text">我的频道</span>
      <van-button
        size="mini"
        plain
        type="danger"
        round
        @click="isShow = !isShow"
        >{{ isShow ? '完成' : '编辑' }}</van-button
      >
    </van-cell>
    <van-cell :border="false">
      <van-grid :gutter="10">
        <van-grid-item
          class="my"
          v-for="(item, index) in channels"
          :key="index"
          @click="changeChannel(item, index)"
        >
          <van-icon
            slot="icon"
            v-show="isShow && !fiexChannel.includes(item.id)"
            name="clear"
          ></van-icon>
          <span :class="{ active: index === active }" slot="text">{{
            item.name
          }}</span>
        </van-grid-item>
      </van-grid>
    </van-cell>
    <van-cell :border="false">
      <span slot="title" class="text">频道推荐</span>
    </van-cell>
    <van-cell :border="false">
      <van-grid :gutter="10">
        <van-grid-item
          class="tuijian"
          v-for="(item, index) in tuijianChannel"
          :key="index"
          :text="item.name"
          @click="addChannel(item)"
        />
      </van-grid>
    </van-cell>
  </div>
</template>

<script>
import { getAllChannel, addUserChannel, delUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  props: ['channels', 'active'],
  data () {
    return {
      // 推荐列表
      tuijiamChannel: [],
      // 关闭按钮显示隐藏
      isShow: false,
      // 不能被删除的列表id
      fiexChannel: [0]
    }
  },

  created () {
    this.getAllList()
  },
  computed: {
    ...mapState(['user']),
    tuijianChannel () {
      return this.tuijiamChannel.filter(item => {
        return !this.channels.find(item1 => item1.id === item.id)
      })
    }
  },
  methods: {
    async getAllList () {
      try {
        const res = await getAllChannel()
        this.tuijiamChannel = res.data.data.channels
      } catch (error) {
        this.$toast('获取所有频道失败！')
      }
    },
    async addChannel (channel) {
      this.channels.push(channel)
      // 数据持久化
      if (this.user) {
        // 登录状态
        try {
          await addUserChannel({
            id: channel.id,
            seq: this.channels.length
          })
        } catch (error) {
          this.$toast('添加失败！')
        }
      } else {
        // 未登录状态
        setItem('MYCHANNEL_LIST', this.channels)
      }
    },
    async changeChannel (item, index) {
      if (this.isShow) {
        if (this.fiexChannel.includes(item.id)) {
          return
        }
        this.channels.splice(index, 1)
        if (index <= this.active) {
          this.$emit('activeIndexsub')
        }
      } else {
        this.$emit('activeIndex', index)
      }
      if (this.fiexChannel.includes(item.id)) {
        return
      }
      // 数据持久化
      if (this.user) {
        // 登录状态
        try {
          await delUserChannel(item.id)
        } catch (error) {
          this.$toast('请求失败！')
        }
      } else {
        // 未登录状态
        setItem('MYCHANNEL_LIST', this.channels)
      }
    }
  }
}
</script>

<style scoped lang="less">
.edit {
  padding-top: 80px;
}
.van-button {
  width: 104px;
  height: 48px;
  font-size: 26px;
  color: #f85959;
  border: 1px solid #f85959;
}
.text {
  font-size: 32px;
  color: #333333;
}
/deep/.van-cell__value {
  overflow: unset;
}

/deep/.van-grid-item__content {
  width: 146px;
  height: 86px;
  background-color: #f3f5f5;
  .van-grid-item__text {
    margin-top: 0;
    white-space: nowrap;
    font-size: 24px;
    color: #212121;
  }
}
/deep/.tuijian {
  .van-grid-item__text {
    position: relative;
    padding-left: 15px;
    &::before {
      content: '＋';
      position: absolute;
      top: -15px;
      left: -22px;
      font-size: 40px;
    }
  }
}
/deep/.my {
  .van-icon-clear {
    position: absolute;
    top: 0;
    right: -23px;
    font-size: 25px;
    transform: translate(-50%, -50%);
    color: #999;
    z-index: 9999999999;
  }
}
/deep/.van-grid-item__icon-wrapper {
  position: unset;
}
.active {
  color: #f85959;
}
</style>
